<template>
  <view class="refund-detail">
    <!-- 退款状态 -->
    <wd-cell-group custom-class="status-card" inset>
      <view class="status-header">
        <view class="status-icon" :class="getStatusClass">
          <wd-icon v-if="refundInfo.status === 1" name="success" size="52"/>
          <wd-icon v-else-if="refundInfo.status === 2" name="close" size="52"/>
          <wd-icon v-else-if="refundInfo.status === 3" name="loading" size="52"/>
          <wd-icon v-else-if="refundInfo.status === 4" name="warn" size="52"/>
        </view>
        <view class="status-content">
          <view class="status-text" :class="getStatusClass">
            <text v-if="refundInfo.status === 1">退款成功</text>
            <text v-else-if="refundInfo.status === 2">退款关闭</text>
            <text v-else-if="refundInfo.status === 3">退款处理中</text>
            <text v-else-if="refundInfo.status === 4">退款异常</text>
          </view>
          <view class="status-desc">
            <text>{{ getApplyStatusText(refundInfo.applyStatus) }}</text>
            <text v-if="refundInfo.updateTime">· {{ formatTime(refundInfo.updateTime) }}</text>
          </view>
        </view>
      </view>
    </wd-cell-group>

    <!-- 退款信息 -->
    <wd-cell-group custom-class="info-card" inset title="退款信息">
      <wd-cell title="订单编号" :value="refundInfo.orderNo" :border="false" clickable @click="copyText(refundInfo.orderNo)"/>
      <wd-cell title="退款单号" :value="refundInfo.refundNo" :border="false" clickable @click="copyText(refundInfo.refundNo)"/>
      <wd-cell title="退款原因" :value="refundInfo.reason" :border="false"/>
      <wd-cell v-if="refundInfo.rejectReason" title="拒绝原因" :border="false">
        <view class="reject-reason">{{ refundInfo.rejectReason }}</view>
      </wd-cell>
      <wd-cell title="退款渠道" :value="getChannelText(refundInfo.channel)" :border="false"/>
      <wd-cell title="退款账户" :value="refundInfo.userReceivedAccount" :border="false"/>
      <wd-cell v-if="refundInfo.createTime" title="退款单创建时间" :value="formatTime(refundInfo.createTime)" :border="false"/>
      <wd-cell v-if="refundInfo.updateTime" title="退款成功时间" :value="formatTime(refundInfo.updateTime)" :border="false"/>
    </wd-cell-group>

    <!-- 商品信息 -->
    <wd-cell-group v-if="refundInfo.goods" custom-class="info-card" inset title="商品信息">
      <view class="goods-item">
        <image class="goods-image" :src="refundInfo.goods.image" mode="aspectFill"/>
        <view class="goods-info">
          <view class="goods-name">{{ refundInfo.goods.name }}</view>
          <view class="goods-sku" v-if="refundInfo.goods.skuText">{{ refundInfo.goods.skuText }}</view>
          <view class="goods-price">
            <text class="price">¥{{ refundInfo.goods.price }}</text>
            <text class="num">x{{ refundInfo.goods.num }}</text>
          </view>
        </view>
      </view>
    </wd-cell-group>

    <!-- 备注信息 -->
    <wd-cell-group v-if="refundInfo.remark" custom-class="info-card" inset title="备注信息">
      <view class="remark-content">{{ refundInfo.remark }}</view>
    </wd-cell-group>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { getRefundDetail } from '@/api/order'
import { onLoad } from '@dcloudio/uni-app'

const id = ref('')
const refundInfo = ref({})

// 格式化时间
const formatTime = (time) => {
  if (!time) return ''
  // 先替换T为空格
  let formattedTime = time.replace('T', ' ')
  // 如果包含毫秒，去掉毫秒
  if (formattedTime.includes('.')) {
    formattedTime = formattedTime.split('.')[0]
  }
  // 如果包含Z，去掉Z
  if (formattedTime.includes('Z')) {
    formattedTime = formattedTime.replace('Z', '')
  }
  return formattedTime
}

// 复制文本
const copyText = (text) => {
  uni.setClipboardData({
    data: text,
    success: () => {
      uni.showToast({
        title: '复制成功',
        icon: 'none'
      })
    }
  })
}

// 获取状态样式
const getStatusClass = computed(() => {
  const status = refundInfo.value.status
  return {
    'status-success': status === 1,
    'status-closed': status === 2,
    'status-processing': status === 3,
    'status-error': status === 4
  }
})

// 获取申请状态文本
const getApplyStatusText = (status) => {
  const statusMap = {
    0: '用户申请退款',
    1: '商家同意',
    2: '商家拒绝'
  }
  return statusMap[status] || '未知状态'
}

// 获取退款渠道文本
const getChannelText = (channel) => {
  const channelMap = {
    1: '原路退款',
    2: '退回到余额',
    3: '原账户异常退到其他余额账户',
    4: '原银行卡异常退到其他银行卡'
  }
  return channelMap[channel] || '未知渠道'
}

// 获取退款详情
const loadRefundDetail = async () => {
  try {
    const res = await getRefundDetail(id.value)
    refundInfo.value = res
  } catch (error) {
    console.error('获取退款详情失败', error)
    uni.showToast({
      title: '获取退款详情失败',
      icon: 'none'
    })
  }
}

// 页面加载时，根据传入的type参数切换到对应标签
onLoad((options) => {
  if (options.id) {
    id.value = options.id
    loadRefundDetail()
  }
})
</script>

<style lang="scss" scoped>
.refund-detail {
  min-height: 100vh;
  background: #f7f8fa;
  padding: 32rpx 24rpx;
}

.status-card {
  margin-bottom: 24rpx;
  border-radius: 20rpx;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
}

.status-header {
  padding: 56rpx 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 32rpx;
    right: 32rpx;
    height: 2rpx;
    background: #f5f5f5;
    transform: scaleY(0.5);
  }
}

.status-icon {
  margin-right: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  
  &.status-success {
    color: #07c160;
  }
  &.status-closed {
    color: #999;
  }
  &.status-processing {
    color: #ff9500;
  }
  &.status-error {
    color: #fa4350;
  }
}

.status-content {
  display: flex;
  flex-direction: column;
}

.status-text {
  font-size: 40rpx;
  font-weight: 600;
  margin-bottom: 16rpx;
  line-height: 1.4;

  &.status-success {
    color: #07c160;
  }
  &.status-closed {
    color: #999;
  }
  &.status-processing {
    color: #ff9500;
  }
  &.status-error {
    color: #fa4350;
  }
}

.status-desc {
  font-size: 26rpx;
  color: #999;
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.info-card {
  border-radius: 20rpx;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
}

.reject-reason {
  color: #fa4350;
  font-size: 28rpx;
  line-height: 1.6;
}

:deep(.wd-cell-group__title) {
  padding: 32rpx;
  font-size: 30rpx;
  color: #333;
  font-weight: 600;
  background: #fff;
  margin-bottom: 0;
  position: relative;
  
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 32rpx;
    right: 32rpx;
    height: 2rpx;
    background: #f5f5f5;
    transform: scaleY(0.5);
  }
}

:deep(.wd-cell) {
  padding: 28rpx 32rpx;
  
  .wd-cell__title {
    color: #666;
    font-size: 28rpx;
  }
  
  .wd-cell__value {
    color: #333;
    font-size: 28rpx;
  }
}

:deep(.wd-cell--clickable:active) {
  background-color: #f7f8fa;
}

.goods-item {
  display: flex;
  padding: 24rpx 32rpx;
}

.goods-image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 8rpx;
  margin-right: 24rpx;
  background: #f5f5f5;
}

.goods-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.goods-name {
  font-size: 28rpx;
  color: #333;
  line-height: 1.4;
  margin-bottom: 8rpx;
}

.goods-sku {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 16rpx;
}

.goods-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  
  .price {
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
  }
  
  .num {
    font-size: 26rpx;
    color: #999;
  }
}

.remark-content {
  padding: 24rpx 32rpx;
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}
</style> 